<template>
    <div class="calendar-warp">
        <div class="calendar-top">
            <div @click="pre">
                <i class="el-icon-arrow-left"></i>
            </div>
            <div>{{ currentDate.year }}年{{ currentDate.month }}月</div>
            <div @click="next">
                <i class="el-icon-arrow-right"></i>
            </div>
        </div>
        <div class="calendar-header">
            <div class="calendar-h-item">日</div>
            <div class="calendar-h-item">一</div>
            <div class="calendar-h-item">二</div>
            <div class="calendar-h-item">三</div>
            <div class="calendar-h-item">四</div>
            <div class="calendar-h-item">五</div>
            <div class="calendar-h-item">六</div>
        </div>
        <div class="calendar-body">
            <div @click="activeItem(item)" class="calendar-b-item" :class="{selection: activeNow == item.date}" :key="item.date" v-for="item in showDateArr">
                {{ showDate( item.date ) }}
                <i v-if="item.flag" class="active"></i>
            </div>
        </div>
    </div>
</template>

<script>

import { teamSchedulingCalendar } from "@/api/service/production/scheduling";
export default {
    data() {
        const now = new Date()
        return {
            activeNow: `${now.getFullYear()}-${ (now.getMonth() + 1).toString().padStart(2, 0) }-${ now.getDate().toString().padStart(2, 0) }`,
            currentDateArr: [],
            showDateArr: [],
            currentDate: {
                year: now.getFullYear(),
                month: (now.getMonth() + 1)
            },
        }
    },
    
    watch: {
        currentDateArr: {
            handler(arr){
                const item = arr[0]
                if(item){
                    this.showDateArr = []
                    const date = new Date(item.date)
                    const day = date.getDay()
                    for(let i = 0; i < day; i++) {
                        this.showDateArr.push({
                            date: null,
                            flag: false
                        })
                    }
                    
                    this.showDateArr = this.showDateArr.concat(arr)
                }
            },
            deep: true
        }
    },
    created() {
        this.getTeamSchedulingCalendar()
    },
    methods: {
        activeItem(item) {
            if(!item.date){
                return;
            }
            this.activeNow = item.date
            this.$emit('clickItem', item.date)
        },
        pre() {
            if(this.currentDate.month == 1) {
                this.currentDate.year --
                this.currentDate.month = 12
            }else{
                this.currentDate.month --
            }
            
            this.getTeamSchedulingCalendar()
        },
        next(){
            if(this.currentDate.month == 12) {
                this.currentDate.year ++
                this.currentDate.month = 1
            }else{
                this.currentDate.month ++
            }
            this.getTeamSchedulingCalendar()
        },
        async getTeamSchedulingCalendar() {
            const res = await teamSchedulingCalendar(this.currentDate)
            this.currentDateArr = res.data
            this.$emit('clickItem', this.activeNow)
        },
        showDate(date) {
            if(date) {
                return date.split("-")[2]
            }
            return ""
        }
    }
}
</script>


<style scoped lang="scss">
.calendar-warp {
    .calendar-top{
        font-weight: bold;
        font-size: 26px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
        gap: 10px;
        i {
            cursor: pointer;
        }
    }
    .calendar-header{
        display: flex;
        .calendar-h-item{
     
            text-align: center;
            width: 60px;
            height: 60px;
        }
    }
    .calendar-body{
        display: flex;
        flex-wrap: wrap;
        .calendar-b-item{
            &.selection{
                background: #ccc;
            }
            text-align: center;
            width: 60px;
            height: 60px;
            cursor: pointer;
            position: relative;
            padding-top: 20px;
            .active{
                display: inline-block;
                position: absolute;
                left: 70%;
                top: 70%;

                width: 8px;
                height: 8px;
                border-radius: 50%;
                background-color: red;
            }
        }
    }
}
</style>